<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue项目实例演示 | 仲灏小栈</title>
    <meta name="generator" content="VuePress 1.9.5">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="专注web全栈学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="code-5CGlqw1B4p">
    <meta name="google-site-verification" content="PbO8RiLRwDnNwqNFNGnaxZnEFB3CqcGMCGoloYfQXV0">
    <meta name="theme-color" content="#65d1a0">
    
    <link rel="preload" href="/assets/css/0.styles.6c1f7aaa.css" as="style"><link rel="preload" href="/assets/js/app.6d26e8d4.js" as="script"><link rel="preload" href="/assets/js/2.8273876b.js" as="script"><link rel="preload" href="/assets/js/364.419b3dab.js" as="script"><link rel="prefetch" href="/assets/js/10.cb095657.js"><link rel="prefetch" href="/assets/js/100.fbcd69a7.js"><link rel="prefetch" href="/assets/js/101.8fad45f8.js"><link rel="prefetch" href="/assets/js/102.16b0b3d1.js"><link rel="prefetch" href="/assets/js/103.c2af4d4a.js"><link rel="prefetch" href="/assets/js/104.d37d4660.js"><link rel="prefetch" href="/assets/js/105.27e54103.js"><link rel="prefetch" href="/assets/js/106.e4098682.js"><link rel="prefetch" href="/assets/js/107.8efeef5d.js"><link rel="prefetch" href="/assets/js/108.6c305bbf.js"><link rel="prefetch" href="/assets/js/109.6f1c6613.js"><link rel="prefetch" href="/assets/js/11.d1f39b42.js"><link rel="prefetch" href="/assets/js/110.6f264ba6.js"><link rel="prefetch" href="/assets/js/111.1b6294ef.js"><link rel="prefetch" href="/assets/js/112.2ad16154.js"><link rel="prefetch" href="/assets/js/113.a40acefc.js"><link rel="prefetch" href="/assets/js/114.d44cb107.js"><link rel="prefetch" href="/assets/js/115.bd15b919.js"><link rel="prefetch" href="/assets/js/116.778a9058.js"><link rel="prefetch" href="/assets/js/117.19ff15b7.js"><link rel="prefetch" href="/assets/js/118.2630ca8d.js"><link rel="prefetch" href="/assets/js/119.604bd439.js"><link rel="prefetch" href="/assets/js/12.892c0d9f.js"><link rel="prefetch" href="/assets/js/120.43a964f8.js"><link rel="prefetch" href="/assets/js/121.5993f55a.js"><link rel="prefetch" href="/assets/js/122.6c054fcf.js"><link rel="prefetch" href="/assets/js/123.95ddd9a3.js"><link rel="prefetch" href="/assets/js/124.c3a9510e.js"><link rel="prefetch" href="/assets/js/125.612c461a.js"><link rel="prefetch" href="/assets/js/126.ccdb194e.js"><link rel="prefetch" href="/assets/js/127.865789a0.js"><link rel="prefetch" href="/assets/js/128.9e0bc723.js"><link rel="prefetch" href="/assets/js/129.68515ee6.js"><link rel="prefetch" href="/assets/js/13.ea744146.js"><link rel="prefetch" href="/assets/js/130.32a31759.js"><link rel="prefetch" href="/assets/js/131.467e7aaf.js"><link rel="prefetch" href="/assets/js/132.3bb05df9.js"><link rel="prefetch" href="/assets/js/133.52bbf931.js"><link rel="prefetch" href="/assets/js/134.ee00e869.js"><link rel="prefetch" href="/assets/js/135.aadd30fb.js"><link rel="prefetch" href="/assets/js/136.6b5bb775.js"><link rel="prefetch" href="/assets/js/137.9d66b052.js"><link rel="prefetch" href="/assets/js/138.1df874a9.js"><link rel="prefetch" href="/assets/js/139.bd1e48e9.js"><link rel="prefetch" href="/assets/js/14.c755eadf.js"><link rel="prefetch" href="/assets/js/140.2a849d58.js"><link rel="prefetch" href="/assets/js/141.28c22cf9.js"><link rel="prefetch" href="/assets/js/142.e99735ee.js"><link rel="prefetch" href="/assets/js/143.0666fdce.js"><link rel="prefetch" href="/assets/js/144.216c1efe.js"><link rel="prefetch" href="/assets/js/145.fad2c93a.js"><link rel="prefetch" href="/assets/js/146.01533714.js"><link rel="prefetch" href="/assets/js/147.1af38e50.js"><link rel="prefetch" href="/assets/js/148.84844c3d.js"><link rel="prefetch" href="/assets/js/149.49ce06ed.js"><link rel="prefetch" href="/assets/js/15.7a29d3f4.js"><link rel="prefetch" href="/assets/js/150.234bdfef.js"><link rel="prefetch" href="/assets/js/151.89e0796a.js"><link rel="prefetch" href="/assets/js/152.389ced87.js"><link rel="prefetch" href="/assets/js/153.07285920.js"><link rel="prefetch" href="/assets/js/154.965fc5c1.js"><link rel="prefetch" href="/assets/js/155.7bf58a9a.js"><link rel="prefetch" href="/assets/js/156.99e400e4.js"><link rel="prefetch" href="/assets/js/157.b6edd5ab.js"><link rel="prefetch" href="/assets/js/158.af656e52.js"><link rel="prefetch" href="/assets/js/159.4b3d37d2.js"><link rel="prefetch" href="/assets/js/16.5c417580.js"><link rel="prefetch" href="/assets/js/160.fa1e9d1b.js"><link rel="prefetch" href="/assets/js/161.43d6f2b4.js"><link rel="prefetch" href="/assets/js/162.c0e7e60f.js"><link rel="prefetch" href="/assets/js/163.c78d27b4.js"><link rel="prefetch" href="/assets/js/164.7ee2986b.js"><link rel="prefetch" href="/assets/js/165.bbc6516b.js"><link rel="prefetch" href="/assets/js/166.90e15253.js"><link rel="prefetch" href="/assets/js/167.18578ca6.js"><link rel="prefetch" href="/assets/js/168.c52ad494.js"><link rel="prefetch" href="/assets/js/169.c34b2d53.js"><link rel="prefetch" href="/assets/js/17.76fdc3b2.js"><link rel="prefetch" href="/assets/js/170.c97f6096.js"><link rel="prefetch" href="/assets/js/171.358f0f02.js"><link rel="prefetch" href="/assets/js/172.30f03133.js"><link rel="prefetch" href="/assets/js/173.b72d5243.js"><link rel="prefetch" href="/assets/js/174.4e333643.js"><link rel="prefetch" href="/assets/js/175.2c07b836.js"><link rel="prefetch" href="/assets/js/176.29bcb24c.js"><link rel="prefetch" href="/assets/js/177.102b3f0f.js"><link rel="prefetch" href="/assets/js/178.5862bde0.js"><link rel="prefetch" href="/assets/js/179.0da54072.js"><link rel="prefetch" href="/assets/js/18.f857e697.js"><link rel="prefetch" href="/assets/js/180.393e8099.js"><link rel="prefetch" href="/assets/js/181.418f9fe8.js"><link rel="prefetch" href="/assets/js/182.e65424fa.js"><link rel="prefetch" href="/assets/js/183.3b3cb092.js"><link rel="prefetch" href="/assets/js/184.73f7a76a.js"><link rel="prefetch" href="/assets/js/185.537623fb.js"><link rel="prefetch" href="/assets/js/186.df802468.js"><link rel="prefetch" href="/assets/js/187.1095bafd.js"><link rel="prefetch" href="/assets/js/188.1d2acd1a.js"><link rel="prefetch" href="/assets/js/189.dc6a5186.js"><link rel="prefetch" href="/assets/js/19.8c1d0f81.js"><link rel="prefetch" href="/assets/js/190.a279b4dd.js"><link rel="prefetch" href="/assets/js/191.3abaa15f.js"><link rel="prefetch" href="/assets/js/192.4d0dd04e.js"><link rel="prefetch" href="/assets/js/193.2c698e6f.js"><link rel="prefetch" href="/assets/js/194.4243beaa.js"><link rel="prefetch" href="/assets/js/195.7c13b124.js"><link rel="prefetch" href="/assets/js/196.b18118bf.js"><link rel="prefetch" href="/assets/js/197.2abfac38.js"><link rel="prefetch" href="/assets/js/198.407f0a8b.js"><link rel="prefetch" href="/assets/js/199.d4e97578.js"><link rel="prefetch" href="/assets/js/20.47831bf7.js"><link rel="prefetch" href="/assets/js/200.86ce407c.js"><link rel="prefetch" href="/assets/js/201.56a65a3f.js"><link rel="prefetch" href="/assets/js/202.f852c6e8.js"><link rel="prefetch" href="/assets/js/203.92530d7a.js"><link rel="prefetch" href="/assets/js/204.ce612269.js"><link rel="prefetch" href="/assets/js/205.b14b2d70.js"><link rel="prefetch" href="/assets/js/206.b5112828.js"><link rel="prefetch" href="/assets/js/207.a4becd8a.js"><link rel="prefetch" href="/assets/js/208.f82e2766.js"><link rel="prefetch" href="/assets/js/209.11566ec8.js"><link rel="prefetch" href="/assets/js/21.8580b0b4.js"><link rel="prefetch" href="/assets/js/210.bf848e0e.js"><link rel="prefetch" href="/assets/js/211.6db52324.js"><link rel="prefetch" href="/assets/js/212.c9a03071.js"><link rel="prefetch" href="/assets/js/213.734c775f.js"><link rel="prefetch" href="/assets/js/214.7654a416.js"><link rel="prefetch" href="/assets/js/215.34ad7e3d.js"><link rel="prefetch" href="/assets/js/216.aabcd184.js"><link rel="prefetch" href="/assets/js/217.26ffe7d6.js"><link rel="prefetch" href="/assets/js/218.d8ceaf2e.js"><link rel="prefetch" href="/assets/js/219.82bad7ef.js"><link rel="prefetch" href="/assets/js/22.2d87ea68.js"><link rel="prefetch" href="/assets/js/220.0c35dcdf.js"><link rel="prefetch" href="/assets/js/221.8657d7c1.js"><link rel="prefetch" href="/assets/js/222.291af8a7.js"><link rel="prefetch" href="/assets/js/223.e8ce5ce0.js"><link rel="prefetch" href="/assets/js/224.2c3c1268.js"><link rel="prefetch" href="/assets/js/225.b31429da.js"><link rel="prefetch" href="/assets/js/226.8ec29e66.js"><link rel="prefetch" href="/assets/js/227.84469b41.js"><link rel="prefetch" href="/assets/js/228.cd6b9967.js"><link rel="prefetch" href="/assets/js/229.e5497c23.js"><link rel="prefetch" href="/assets/js/23.c1a929a6.js"><link rel="prefetch" href="/assets/js/230.643fdbb6.js"><link rel="prefetch" href="/assets/js/231.22457248.js"><link rel="prefetch" href="/assets/js/232.7e94e6f0.js"><link rel="prefetch" href="/assets/js/233.1083085e.js"><link rel="prefetch" href="/assets/js/234.6ce5972b.js"><link rel="prefetch" href="/assets/js/235.bc1d1e7e.js"><link rel="prefetch" href="/assets/js/236.f510d892.js"><link rel="prefetch" href="/assets/js/237.4690c583.js"><link rel="prefetch" href="/assets/js/238.ef69b085.js"><link rel="prefetch" href="/assets/js/239.e7cbaef4.js"><link rel="prefetch" href="/assets/js/24.707a9b9d.js"><link rel="prefetch" href="/assets/js/240.02e1ce4d.js"><link rel="prefetch" href="/assets/js/241.8ccdecd0.js"><link rel="prefetch" href="/assets/js/242.25a5eeac.js"><link rel="prefetch" href="/assets/js/243.80dc6cf3.js"><link rel="prefetch" href="/assets/js/244.d2d264c1.js"><link rel="prefetch" href="/assets/js/245.8646c059.js"><link rel="prefetch" href="/assets/js/246.0d788a8c.js"><link rel="prefetch" href="/assets/js/247.211b425b.js"><link rel="prefetch" href="/assets/js/248.15e5b430.js"><link rel="prefetch" href="/assets/js/249.b28c41d2.js"><link rel="prefetch" href="/assets/js/25.e47a8360.js"><link rel="prefetch" href="/assets/js/250.e4621bbf.js"><link rel="prefetch" href="/assets/js/251.2f49ea1d.js"><link rel="prefetch" href="/assets/js/252.c567824c.js"><link rel="prefetch" href="/assets/js/253.7eb2a6c2.js"><link rel="prefetch" href="/assets/js/254.adf8b2ad.js"><link rel="prefetch" href="/assets/js/255.43d07402.js"><link rel="prefetch" href="/assets/js/256.d49b01ff.js"><link rel="prefetch" href="/assets/js/257.cc61cd1a.js"><link rel="prefetch" href="/assets/js/258.e46ee926.js"><link rel="prefetch" href="/assets/js/259.5c84c742.js"><link rel="prefetch" href="/assets/js/26.db56ba8d.js"><link rel="prefetch" href="/assets/js/260.05cc8cff.js"><link rel="prefetch" href="/assets/js/261.1891f9c6.js"><link rel="prefetch" href="/assets/js/262.0913812a.js"><link rel="prefetch" href="/assets/js/263.a6836819.js"><link rel="prefetch" href="/assets/js/264.363da610.js"><link rel="prefetch" href="/assets/js/265.2cbfbe9f.js"><link rel="prefetch" href="/assets/js/266.555ca792.js"><link rel="prefetch" href="/assets/js/267.83f4c202.js"><link rel="prefetch" href="/assets/js/268.6dea35af.js"><link rel="prefetch" href="/assets/js/269.cbc5306b.js"><link rel="prefetch" href="/assets/js/27.0b0c1f7f.js"><link rel="prefetch" href="/assets/js/270.6bc430c5.js"><link rel="prefetch" href="/assets/js/271.f5105765.js"><link rel="prefetch" href="/assets/js/272.e1541ef7.js"><link rel="prefetch" href="/assets/js/273.158c7593.js"><link rel="prefetch" href="/assets/js/274.efb98c5b.js"><link rel="prefetch" href="/assets/js/275.cf2c3b21.js"><link rel="prefetch" href="/assets/js/276.0bf20a2d.js"><link rel="prefetch" href="/assets/js/277.2e4ddf6c.js"><link rel="prefetch" href="/assets/js/278.7f8b14ac.js"><link rel="prefetch" href="/assets/js/279.83a65d2f.js"><link rel="prefetch" href="/assets/js/28.a5d8ae18.js"><link rel="prefetch" href="/assets/js/280.47de1643.js"><link rel="prefetch" href="/assets/js/281.1d5cab51.js"><link rel="prefetch" href="/assets/js/282.b2299bce.js"><link rel="prefetch" href="/assets/js/283.fdad201b.js"><link rel="prefetch" href="/assets/js/284.cdf83f8f.js"><link rel="prefetch" href="/assets/js/285.caee6eb0.js"><link rel="prefetch" href="/assets/js/286.6b211023.js"><link rel="prefetch" href="/assets/js/287.e9e93db3.js"><link rel="prefetch" href="/assets/js/288.5892d2e1.js"><link rel="prefetch" href="/assets/js/289.48074c49.js"><link rel="prefetch" href="/assets/js/29.0bc8ea25.js"><link rel="prefetch" href="/assets/js/290.b478b2ab.js"><link rel="prefetch" href="/assets/js/291.18239d2b.js"><link rel="prefetch" href="/assets/js/292.9f6b48b4.js"><link rel="prefetch" href="/assets/js/293.70a0b924.js"><link rel="prefetch" href="/assets/js/294.bc5f021a.js"><link rel="prefetch" href="/assets/js/295.dfa72324.js"><link rel="prefetch" href="/assets/js/296.fb717477.js"><link rel="prefetch" href="/assets/js/297.2b2daf25.js"><link rel="prefetch" href="/assets/js/298.0ed3ce25.js"><link rel="prefetch" href="/assets/js/299.c59a3f82.js"><link rel="prefetch" href="/assets/js/3.d68e1d13.js"><link rel="prefetch" href="/assets/js/30.063f8dbe.js"><link rel="prefetch" href="/assets/js/300.f423c130.js"><link rel="prefetch" href="/assets/js/301.a11bcaa5.js"><link rel="prefetch" href="/assets/js/302.5a45b99e.js"><link rel="prefetch" href="/assets/js/303.80ac16da.js"><link rel="prefetch" href="/assets/js/304.f773afc2.js"><link rel="prefetch" href="/assets/js/305.52f1b3ba.js"><link rel="prefetch" href="/assets/js/306.966f2eef.js"><link rel="prefetch" href="/assets/js/307.c22143cf.js"><link rel="prefetch" href="/assets/js/308.a6dfec6e.js"><link rel="prefetch" href="/assets/js/309.377e4f0b.js"><link rel="prefetch" href="/assets/js/31.69d8f2c2.js"><link rel="prefetch" href="/assets/js/310.a76309fc.js"><link rel="prefetch" href="/assets/js/311.0706d5ca.js"><link rel="prefetch" href="/assets/js/312.40513d91.js"><link rel="prefetch" href="/assets/js/313.e36621af.js"><link rel="prefetch" href="/assets/js/314.3d4325be.js"><link rel="prefetch" href="/assets/js/315.72480163.js"><link rel="prefetch" href="/assets/js/316.83f31163.js"><link rel="prefetch" href="/assets/js/317.872fd713.js"><link rel="prefetch" href="/assets/js/318.0dc2aea4.js"><link rel="prefetch" href="/assets/js/319.454e4745.js"><link rel="prefetch" href="/assets/js/32.50aa541b.js"><link rel="prefetch" href="/assets/js/320.d9116236.js"><link rel="prefetch" href="/assets/js/321.b06a7a4e.js"><link rel="prefetch" href="/assets/js/322.41bcaaf1.js"><link rel="prefetch" href="/assets/js/323.f01ba88b.js"><link rel="prefetch" href="/assets/js/324.9a736f30.js"><link rel="prefetch" href="/assets/js/325.49b1193e.js"><link rel="prefetch" href="/assets/js/326.5a07b4a0.js"><link rel="prefetch" href="/assets/js/327.aceece56.js"><link rel="prefetch" href="/assets/js/328.e03489c3.js"><link rel="prefetch" href="/assets/js/329.5673fdef.js"><link rel="prefetch" href="/assets/js/33.4aa00ff3.js"><link rel="prefetch" href="/assets/js/330.246e74fa.js"><link rel="prefetch" href="/assets/js/331.e1cffa6b.js"><link rel="prefetch" href="/assets/js/332.2856b83e.js"><link rel="prefetch" href="/assets/js/333.d4c9c15a.js"><link rel="prefetch" href="/assets/js/334.13b03971.js"><link rel="prefetch" href="/assets/js/335.0b8ed702.js"><link rel="prefetch" href="/assets/js/336.3e71f28d.js"><link rel="prefetch" href="/assets/js/337.f929f08c.js"><link rel="prefetch" href="/assets/js/338.01a6cfbe.js"><link rel="prefetch" href="/assets/js/339.5cd647ad.js"><link rel="prefetch" href="/assets/js/34.b25c4a87.js"><link rel="prefetch" href="/assets/js/340.f941cae0.js"><link rel="prefetch" href="/assets/js/341.aa01a6b1.js"><link rel="prefetch" href="/assets/js/342.edd59a58.js"><link rel="prefetch" href="/assets/js/343.237c716b.js"><link rel="prefetch" href="/assets/js/344.06e59f2b.js"><link rel="prefetch" href="/assets/js/345.ddd4f6fe.js"><link rel="prefetch" href="/assets/js/346.70fe3c42.js"><link rel="prefetch" href="/assets/js/347.d39ad15e.js"><link rel="prefetch" href="/assets/js/348.1b135410.js"><link rel="prefetch" href="/assets/js/349.fd78d783.js"><link rel="prefetch" href="/assets/js/35.a1af8744.js"><link rel="prefetch" href="/assets/js/350.b10e7d69.js"><link rel="prefetch" href="/assets/js/351.a6ae4318.js"><link rel="prefetch" href="/assets/js/352.3117739a.js"><link rel="prefetch" href="/assets/js/353.99e022f1.js"><link rel="prefetch" href="/assets/js/354.a444c2d8.js"><link rel="prefetch" href="/assets/js/355.13d044aa.js"><link rel="prefetch" href="/assets/js/356.d2cfe5d0.js"><link rel="prefetch" href="/assets/js/357.eb44f05f.js"><link rel="prefetch" href="/assets/js/358.394c15db.js"><link rel="prefetch" href="/assets/js/359.6c541551.js"><link rel="prefetch" href="/assets/js/36.5558b717.js"><link rel="prefetch" href="/assets/js/360.65af88d5.js"><link rel="prefetch" href="/assets/js/361.d9b3c889.js"><link rel="prefetch" href="/assets/js/362.37ec0a7d.js"><link rel="prefetch" href="/assets/js/363.49690222.js"><link rel="prefetch" href="/assets/js/365.1f79df07.js"><link rel="prefetch" href="/assets/js/366.fa710c6f.js"><link rel="prefetch" href="/assets/js/367.497eeda5.js"><link rel="prefetch" href="/assets/js/368.45cf08f6.js"><link rel="prefetch" href="/assets/js/369.80a60b6a.js"><link rel="prefetch" href="/assets/js/37.511798d2.js"><link rel="prefetch" href="/assets/js/370.61b161b4.js"><link rel="prefetch" href="/assets/js/371.545f0249.js"><link rel="prefetch" href="/assets/js/372.d383f896.js"><link rel="prefetch" href="/assets/js/373.df22361b.js"><link rel="prefetch" href="/assets/js/374.0b9872ee.js"><link rel="prefetch" href="/assets/js/375.76bbca97.js"><link rel="prefetch" href="/assets/js/376.1f6f8210.js"><link rel="prefetch" href="/assets/js/377.3dd0dc75.js"><link rel="prefetch" href="/assets/js/378.32cac01d.js"><link rel="prefetch" href="/assets/js/379.6682a524.js"><link rel="prefetch" href="/assets/js/38.2dfd8d32.js"><link rel="prefetch" href="/assets/js/380.1ab9ec1d.js"><link rel="prefetch" href="/assets/js/381.cea4ec7d.js"><link rel="prefetch" href="/assets/js/382.fc51cce1.js"><link rel="prefetch" href="/assets/js/383.489718b4.js"><link rel="prefetch" href="/assets/js/384.a7a1c6d7.js"><link rel="prefetch" href="/assets/js/385.7b2d3a89.js"><link rel="prefetch" href="/assets/js/386.f0a18324.js"><link rel="prefetch" href="/assets/js/387.53063e56.js"><link rel="prefetch" href="/assets/js/388.1115759c.js"><link rel="prefetch" href="/assets/js/389.58bf8aaf.js"><link rel="prefetch" href="/assets/js/39.e8482eab.js"><link rel="prefetch" href="/assets/js/4.de17fbe4.js"><link rel="prefetch" href="/assets/js/40.c6dc3476.js"><link rel="prefetch" href="/assets/js/41.78bfe256.js"><link rel="prefetch" href="/assets/js/42.248cddd4.js"><link rel="prefetch" href="/assets/js/43.6429d3dc.js"><link rel="prefetch" href="/assets/js/44.71e9af05.js"><link rel="prefetch" href="/assets/js/45.f80fb4fc.js"><link rel="prefetch" href="/assets/js/46.3d5e7e58.js"><link rel="prefetch" href="/assets/js/47.1bbf5e9a.js"><link rel="prefetch" href="/assets/js/48.6909050b.js"><link rel="prefetch" href="/assets/js/49.9c775f82.js"><link rel="prefetch" href="/assets/js/5.59910585.js"><link rel="prefetch" href="/assets/js/50.aceb6009.js"><link rel="prefetch" href="/assets/js/51.acd0d321.js"><link rel="prefetch" href="/assets/js/52.a4f9f157.js"><link rel="prefetch" href="/assets/js/53.0f1ec943.js"><link rel="prefetch" href="/assets/js/54.6c5c2837.js"><link rel="prefetch" href="/assets/js/55.f412714f.js"><link rel="prefetch" href="/assets/js/56.64a3862c.js"><link rel="prefetch" href="/assets/js/57.d070eb7d.js"><link rel="prefetch" href="/assets/js/58.a80067c8.js"><link rel="prefetch" href="/assets/js/59.084f5e76.js"><link rel="prefetch" href="/assets/js/6.0ab71a58.js"><link rel="prefetch" href="/assets/js/60.42e0fbb5.js"><link rel="prefetch" href="/assets/js/61.b5b87c23.js"><link rel="prefetch" href="/assets/js/62.014cdbe2.js"><link rel="prefetch" href="/assets/js/63.ff1278d1.js"><link rel="prefetch" href="/assets/js/64.44a86cb2.js"><link rel="prefetch" href="/assets/js/65.1a69bd56.js"><link rel="prefetch" href="/assets/js/66.b8d9a1e9.js"><link rel="prefetch" href="/assets/js/67.48e3c0e6.js"><link rel="prefetch" href="/assets/js/68.127da596.js"><link rel="prefetch" href="/assets/js/69.77e4e1cb.js"><link rel="prefetch" href="/assets/js/7.769e6e3f.js"><link rel="prefetch" href="/assets/js/70.7863bd30.js"><link rel="prefetch" href="/assets/js/71.c5c89c65.js"><link rel="prefetch" href="/assets/js/72.030ac8a4.js"><link rel="prefetch" href="/assets/js/73.e96cf593.js"><link rel="prefetch" href="/assets/js/74.f9319fe7.js"><link rel="prefetch" href="/assets/js/75.049ce9e1.js"><link rel="prefetch" href="/assets/js/76.c71e5605.js"><link rel="prefetch" href="/assets/js/77.1e682453.js"><link rel="prefetch" href="/assets/js/78.0cce7473.js"><link rel="prefetch" href="/assets/js/79.3d32f303.js"><link rel="prefetch" href="/assets/js/8.812618a5.js"><link rel="prefetch" href="/assets/js/80.c956dc30.js"><link rel="prefetch" href="/assets/js/81.8276eaa8.js"><link rel="prefetch" href="/assets/js/82.10f6fdc6.js"><link rel="prefetch" href="/assets/js/83.cac65ec1.js"><link rel="prefetch" href="/assets/js/84.a4ce0ebf.js"><link rel="prefetch" href="/assets/js/85.d9efee67.js"><link rel="prefetch" href="/assets/js/86.cf64260c.js"><link rel="prefetch" href="/assets/js/87.e261e385.js"><link rel="prefetch" href="/assets/js/88.63b9894b.js"><link rel="prefetch" href="/assets/js/89.0ad95e30.js"><link rel="prefetch" href="/assets/js/9.c942e82a.js"><link rel="prefetch" href="/assets/js/90.77f9f729.js"><link rel="prefetch" href="/assets/js/91.3fcbf2d5.js"><link rel="prefetch" href="/assets/js/92.8b57334e.js"><link rel="prefetch" href="/assets/js/93.6095e56a.js"><link rel="prefetch" href="/assets/js/94.c616143f.js"><link rel="prefetch" href="/assets/js/95.a9b61cf9.js"><link rel="prefetch" href="/assets/js/96.a3896e7e.js"><link rel="prefetch" href="/assets/js/97.0318332c.js"><link rel="prefetch" href="/assets/js/98.17b8173b.js"><link rel="prefetch" href="/assets/js/99.d299c156.js">
    <link rel="stylesheet" href="/assets/css/0.styles.6c1f7aaa.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="仲灏小栈" class="logo"> <span class="site-name can-hide">仲灏小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他技术</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/site-data/avatar/avatar-wx.jpg"> <div class="blogger-info"><h3>仲灏</h3> <span>诚意, 正心, 格物, 致知</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他技术</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/pages/f697a2/" class="sidebar-link">前提规范</a></li><li><a href="/pages/d642ef/" class="sidebar-link">eslint</a></li><li><a href="/pages/0aa7d0/" class="sidebar-link">prettier</a></li><li><a href="/pages/f91a4d/" class="sidebar-link">lint-staged</a></li><li><a href="/pages/f701f5/" class="sidebar-link">jest测试</a></li><li><a href="/pages/7dd45e/" aria-current="page" class="active sidebar-link">vue项目实例演示</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/7dd45e/#vue2" class="sidebar-link">vue2</a></li></ul></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/note/infrastructure/#《前端项目基础建设》笔记" data-v-06225672>《前端项目基础建设》笔记</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/izhaong" target="_blank" title="作者" class="beLink" data-v-06225672>仲灏</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2022-10-13</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">vue项目实例演示<!----></h1>  <div class="theme-vdoing-content content__default"><h2 id="vue2"><a href="#vue2" class="header-anchor">#</a> vue2</h2> <ul><li><p>npm init</p> <ul><li><div class="language-shell line-numbers-mode"><pre class="language-shell"><code>➜  vue-template git:<span class="token punctuation">(</span>vue2-tpl<span class="token punctuation">)</span> ✗ <span class="token function">npm</span> init
This utility will walk you through creating a package.json file.
It only covers the <span class="token function">most</span> common items, and tries to guess sensible defaults.

See <span class="token variable"><span class="token variable">`</span><span class="token function">npm</span> <span class="token builtin class-name">help</span> init<span class="token variable">`</span></span> <span class="token keyword">for</span> definitive documentation on these fields
and exactly what they do.

Use <span class="token variable"><span class="token variable">`</span><span class="token function">npm</span> <span class="token function">install</span> <span class="token operator">&lt;</span>pkg<span class="token operator">&gt;</span><span class="token variable">`</span></span> afterwards to <span class="token function">install</span> a package and
save it as a dependency <span class="token keyword">in</span> the package.json file.

Press ^C at any <span class="token function">time</span> to quit.
package name: <span class="token punctuation">(</span>vue-template<span class="token punctuation">)</span> 
version: <span class="token punctuation">(</span><span class="token number">1.0</span>.0<span class="token punctuation">)</span> 
description: vue2 template
entry point: <span class="token punctuation">(</span>index.js<span class="token punctuation">)</span> 
<span class="token builtin class-name">test</span> command: 
<span class="token function">git</span> repository: <span class="token punctuation">(</span>https://github.com/izhaong/vue-template.git<span class="token punctuation">)</span> 
keywords: vue2 template tpl
author: izhaong
license: <span class="token punctuation">(</span>ISC<span class="token punctuation">)</span> 
About to <span class="token function">write</span> to /Users/izhaong/izhaong/Project_me/vue-template/package.json:

<span class="token punctuation">{</span>
  <span class="token string">&quot;name&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;vue-template&quot;</span>,
  <span class="token string">&quot;version&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;1.0.0&quot;</span>,
  <span class="token string">&quot;description&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;vue2 template&quot;</span>,
  <span class="token string">&quot;main&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;index.js&quot;</span>,
  <span class="token string">&quot;scripts&quot;</span><span class="token builtin class-name">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;test&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;echo <span class="token entity" title="\&quot;">\&quot;</span>Error: no test specified<span class="token entity" title="\&quot;">\&quot;</span> &amp;&amp; exit 1&quot;</span>
  <span class="token punctuation">}</span>,
  <span class="token string">&quot;repository&quot;</span><span class="token builtin class-name">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;type&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;git&quot;</span>,
    <span class="token string">&quot;url&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;git+https://github.com/izhaong/vue-template.git&quot;</span>
  <span class="token punctuation">}</span>,
  <span class="token string">&quot;keywords&quot;</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;vue2&quot;</span>,
    <span class="token string">&quot;template&quot;</span>,
    <span class="token string">&quot;tpl&quot;</span>
  <span class="token punctuation">]</span>,
  <span class="token string">&quot;author&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;izhaong&quot;</span>,
  <span class="token string">&quot;license&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;ISC&quot;</span>,
  <span class="token string">&quot;bugs&quot;</span><span class="token builtin class-name">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;url&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;https://github.com/izhaong/vue-template/issues&quot;</span>
  <span class="token punctuation">}</span>,
  <span class="token string">&quot;homepage&quot;</span><span class="token builtin class-name">:</span> <span class="token string">&quot;https://github.com/izhaong/vue-template#readme&quot;</span>
<span class="token punctuation">}</span>


Is this OK? <span class="token punctuation">(</span>yes<span class="token punctuation">)</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br></div></div></li> <li><p><code>npm init @eslint/config</code></p> <ul><li><div class="language-shell line-numbers-mode"><pre class="language-shell"><code>➜  vue-template git:<span class="token punctuation">(</span>vue2-tpl<span class="token punctuation">)</span> ✗ <span class="token function">npm</span> init @eslint/config
✔ How would you like to use ESLint? · problems
✔ What <span class="token builtin class-name">type</span> of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What <span class="token function">format</span> <span class="token keyword">do</span> you want your config <span class="token function">file</span> to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
✔ Would you like to <span class="token function">install</span> them now? · No / Yes
✔ Which package manager <span class="token keyword">do</span> you want to use? · <span class="token function">yarn</span>
Installing eslint-plugin-vue@latest, eslint@latest
<span class="token function">yarn</span> <span class="token function">add</span> v1.22.19
info No lockfile found.
<span class="token punctuation">..</span>.
✨  Done <span class="token keyword">in</span> <span class="token number">1</span>.97s.
A config <span class="token function">file</span> was generated, but the config <span class="token function">file</span> itself may not follow your linting rules.
Successfully created .eslintrc.js <span class="token function">file</span> <span class="token keyword">in</span> /Users/izhaong/izhaong/Project_me/vue-template

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div></li></ul></li></ul></li> <li><div class="language- line-numbers-mode"><pre class="language-text"><code>vue-template
├─.eslintrc.js
├─package.json
└yarn.lock
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li> <li><p>修改<code>.eslintrc.js</code></p> <ul><li><div class="language-js line-numbers-mode"><pre class="language-js"><code>    <span class="token string-property property">&quot;env&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">&quot;node&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token string-property property">&quot;extends&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;eslint:recommended&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;plugin:vue/recommended&quot;</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li><code>&quot;plugin:vue/essential&quot;</code> ... <code>base</code>, 加上防止错误或意外行为的规则。</li> <li><code>&quot;plugin:vue/strongly-recommended&quot;</code> ... 以上，加上规则，大大提高了代码的可读性和/或开发体验。</li> <li><code>&quot;plugin:vue/recommended&quot;</code> ...以上，加上执行主观社区默认值的规则，以确保一致性。</li></ul></li></ul></li> <li><p>添加<code>.eslintignore</code></p> <ul><li><div class="language-shell line-numbers-mode"><pre class="language-shell"><code>public
dist
node_modules
build

src/assets
src/static
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div></li> <li></li></ul></li> <li><p>编辑<code>.vscode/setting.json</code> 对eslint做配置</p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;vetur.validation.template&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;eslint.validate&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;javascript&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;javascriptreact&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;vue&quot;</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></li> <li><p>最后加上脚本</p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code>  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;lint:eslint&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint --cache --max-warnings 0  \&quot;{src,mock}/**/*.{vue,ts,tsx}\&quot; --fix&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;lint:fix&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint --fix --cache --ext .js,.jsx,.ts,.tsx,.vue --format=pretty ./src &quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li> <li></li></ul></li></ul></li> <li><p>安装prettier</p> <ul><li><p><code>yarn add --dev --exact prettier</code></p></li> <li><div class="language-shell line-numbers-mode"><pre class="language-shell"><code>➜  vue-template git:<span class="token punctuation">(</span>vue2-tpl<span class="token punctuation">)</span> ✗ <span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">--dev</span> <span class="token parameter variable">--exact</span> prettier
<span class="token function">yarn</span> <span class="token function">add</span> v1.22.19
<span class="token punctuation">[</span><span class="token number">1</span>/4<span class="token punctuation">]</span> 🔍  Resolving packages<span class="token punctuation">..</span>.
<span class="token punctuation">[</span><span class="token number">2</span>/4<span class="token punctuation">]</span> 🚚  Fetching packages<span class="token punctuation">..</span>.
<span class="token punctuation">[</span><span class="token number">3</span>/4<span class="token punctuation">]</span> 🔗  Linking dependencies<span class="token punctuation">..</span>.
<span class="token punctuation">[</span><span class="token number">4</span>/4<span class="token punctuation">]</span> 🔨  Building fresh packages<span class="token punctuation">..</span>.

success Saved lockfile.
success Saved <span class="token number">1</span> new dependency.
info Direct dependencies
└─ prettier@2.7.1
info All dependencies
└─ prettier@2.7.1
✨  Done <span class="token keyword">in</span> <span class="token number">0</span>.68s.
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></li> <li><p><code>echo {}&gt; prettier.config.js</code></p> <ul><li><div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">printWidth</span><span class="token operator">:</span> <span class="token number">180</span><span class="token punctuation">,</span>
  <span class="token literal-property property">semi</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">vueIndentScriptAndStyle</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">singleQuote</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">trailingComma</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">proseWrap</span><span class="token operator">:</span> <span class="token string">'never'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">htmlWhitespaceSensitivity</span><span class="token operator">:</span> <span class="token string">'strict'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">endOfLine</span><span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></li> <li></li></ul></li> <li><p>添加<code>.pretterignore</code></p> <ul><li><div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment"># Ignore artifacts:</span>
build
coverage
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul></li></ul></li> <li><p>处理eslint和prettier冲突问题</p> <ul><li><p><code>yarn add eslint-config-prettier -D</code></p></li> <li><p><code>.eslintrc.js</code></p> <ul><li><div class="language- line-numbers-mode"><pre class="language-text"><code>    &quot;extends&quot;: [
        &quot;eslint:recommended&quot;,
        &quot;plugin:vue/recommended&quot;,
        &quot;prettier&quot;
    ],
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li></ul></li> <li><p>加上script</p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code>  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;lint:prettier&quot;</span><span class="token operator">:</span> <span class="token string">&quot;prettier -c --write  \&quot;src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\&quot; --end-of-line auto&quot;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul></li></ul></li> <li><p>添加stylelint</p> <ul><li><p><code>yarn add stylelint stylelint-config-standard -D</code></p></li> <li><p>添加<code>.stylelintignore</code></p> <ul><li><div class="language- line-numbers-mode"><pre class="language-text"><code>/dist/*
/public/*
public/*
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul></li> <li><p>添加vue style 配置</p> <ul><li><code>yarn add postcss-html stylelint-config-recommended-vue -D</code></li></ul></li> <li><p>添加<code>stylelint.config.js</code></p> <ul><li><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/*
 * @Author: 仲灏&lt;izhaong@outlook.com&gt;🌶🌶🌶
 * @Date: 2022-10-14 13:55:22
 * @LastEditTime: 2022-10-14 14:31:15
 * @LastEditors: 仲灏&lt;izhaong@outlook.com&gt;🌶🌶🌶
 * @Description:
 * @FilePath: /vue-template/stylelint.config.js
 */</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;stylelint-config-standard&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;stylelint-config-prettier&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">overrides</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">files</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;*.vue&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;**/*.vue&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;stylelint-config-recommended-vue&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">&quot;unit-allowed-list&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;em&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;rem&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;s&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">&quot;selector-pseudo-class-no-unknown&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">ignorePseudoClasses</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;deep&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;global&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">&quot;selector-pseudo-element-no-unknown&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">ignorePseudoElements</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;v-deep&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;v-global&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;v-slotted&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;selector-class-pattern&quot;</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;selector-pseudo-class-no-unknown&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">ignorePseudoClasses</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;global&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;selector-pseudo-element-no-unknown&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">ignorePseudoElements</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;v-deep&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;at-rule-no-unknown&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">ignoreAtRules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token string">&quot;tailwind&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;apply&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;variants&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;responsive&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;screen&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;function&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;if&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;each&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;include&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mixin&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;no-empty-source&quot;</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;named-grid-areas-no-invalid&quot;</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;unicode-bom&quot;</span><span class="token operator">:</span> <span class="token string">&quot;never&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;no-descending-specificity&quot;</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;font-family-no-missing-generic-family-keyword&quot;</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;declaration-colon-space-after&quot;</span><span class="token operator">:</span> <span class="token string">&quot;always-single-line&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;declaration-colon-space-before&quot;</span><span class="token operator">:</span> <span class="token string">&quot;never&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">// 'declaration-block-trailing-semicolon': 'always',</span>
    <span class="token string-property property">&quot;rule-empty-line-before&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">&quot;always&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">ignore</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;after-comment&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;first-nested&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;unit-no-unknown&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">ignoreUnits</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;rpx&quot;</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;order/order&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">[</span>
        <span class="token string">&quot;dollar-variables&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;custom-properties&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;at-rules&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;declarations&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;at-rule&quot;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;supports&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;at-rule&quot;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;media&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token string">&quot;rules&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">severity</span><span class="token operator">:</span> <span class="token string">&quot;warning&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">ignoreFiles</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;**/*.js&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;**/*.jsx&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;**/*.tsx&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;**/*.ts&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br></div></div></li> <li></li></ul></li></ul></li> <li><p>Git hooks</p> <ul><li><p>安装<a href="https://github.com/typicode/husky" target="_blank" rel="noopener noreferrer">husky<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://github.com/okonet/lint-staged" target="_blank" rel="noopener noreferrer">lint-staged<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>:</p> <ul><li><div class="language- line-numbers-mode"><pre class="language-text"><code>yarn add --dev husky lint-staged
npx husky install
npm set-script prepare &quot;husky install&quot;
npx husky add .husky/pre-commit &quot;npx lint-staged&quot;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li></ul></li> <li><p>配置 <code>package.json</code></p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code>  <span class="token property">&quot;lint-staged&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;*.{js,ts,vue}&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint --fix&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;*.{json,yml,css,scss}&quot;</span><span class="token operator">:</span> <span class="token string">&quot;prettier --write&quot;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li></ul></li> <li><p>commit msg 校验</p> <ul><li><p><code>yarn add cz-git @commitlint/cli @commitlint/config-conventional -D</code></p></li> <li><p>配置<code>package.json</code></p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code>  <span class="token property">&quot;config&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;commitizen&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node_modules/cz-git&quot;</span><span class="token punctuation">,</span>
			<span class="token property">&quot;useEmoji&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></li></ul></li> <li><p>增加自定义配置文件 <code>commitment.config.js</code></p> <ul><li><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> execSync <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'child_process'</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> scopes <span class="token operator">=</span> fs
  <span class="token punctuation">.</span><span class="token function">readdirSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">withFileTypes</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">dirent</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> dirent<span class="token punctuation">.</span><span class="token function">isDirectory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">dirent</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> dirent<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">s$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// precomputed scope</span>
<span class="token keyword">const</span> scopeComplete <span class="token operator">=</span> <span class="token function">execSync</span><span class="token punctuation">(</span><span class="token string">'git status --porcelain || true'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">r</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">~</span>r<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'M  src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token operator">?.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(\/)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">'%%'</span><span class="token punctuation">)</span>
  <span class="token operator">?.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">src%%((\w|-)*)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token operator">?.</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
  <span class="token operator">?.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">s$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>

<span class="token comment">/** @type {import('cz-git').UserConfig} */</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">ignores</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">(</span><span class="token parameter">commit</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> commit<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'init'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@commitlint/config-conventional'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">'body-leading-blank'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'always'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">'footer-leading-blank'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'always'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">'header-max-length'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'always'</span><span class="token punctuation">,</span> <span class="token number">108</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">'subject-empty'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'never'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">'type-empty'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'never'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">'subject-case'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">'type-enum'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'always'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'feat'</span><span class="token punctuation">,</span> <span class="token string">'fix'</span><span class="token punctuation">,</span> <span class="token string">'perf'</span><span class="token punctuation">,</span> <span class="token string">'style'</span><span class="token punctuation">,</span> <span class="token string">'docs'</span><span class="token punctuation">,</span> <span class="token string">'test'</span><span class="token punctuation">,</span> <span class="token string">'refactor'</span><span class="token punctuation">,</span> <span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token string">'ci'</span><span class="token punctuation">,</span> <span class="token string">'chore'</span><span class="token punctuation">,</span> <span class="token string">'revert'</span><span class="token punctuation">,</span> <span class="token string">'wip'</span><span class="token punctuation">,</span> <span class="token string">'workflow'</span><span class="token punctuation">,</span> <span class="token string">'types'</span><span class="token punctuation">,</span> <span class="token string">'release'</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">prompt</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">/** @use `yarn commit :f` */</span>
    <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">f</span><span class="token operator">:</span> <span class="token string">'docs: fix typos'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token string">'docs: update README'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">s</span><span class="token operator">:</span> <span class="token string">'style: update code format'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token string">'build: bump dependencies'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token string">'chore: update config'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">customScopesAlign</span><span class="token operator">:</span> <span class="token operator">!</span>scopeComplete <span class="token operator">?</span> <span class="token string">'top'</span> <span class="token operator">:</span> <span class="token string">'bottom'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">defaultScope</span><span class="token operator">:</span> scopeComplete<span class="token punctuation">,</span>
    <span class="token literal-property property">scopes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>scopes<span class="token punctuation">,</span> <span class="token string">'mock'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">allowEmptyIssuePrefixs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">allowCustomIssuePrefixs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>

    <span class="token comment">// English</span>
    <span class="token literal-property property">typesAppend</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'wip'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'wip:      work in process'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'workflow'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'workflow: workflow improvements'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'types'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'types:    type definition file changes'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>

    <span class="token comment">// 中英文对照版</span>
    <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'选择你要提交的类型 :'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">'选择一个提交范围 (可选):'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">customScope</span><span class="token operator">:</span> <span class="token string">'请输入自定义的提交范围 :'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">subject</span><span class="token operator">:</span> <span class="token string">'填写简短精炼的变更描述 :\n'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token string">'填写更加详细的变更描述 (可选)。使用 &quot;|&quot; 换行 :\n'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">breaking</span><span class="token operator">:</span> <span class="token string">'列举非兼容性重大的变更 (可选)。使用 &quot;|&quot; 换行 :\n'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">footerPrefixsSelect</span><span class="token operator">:</span> <span class="token string">'选择关联issue前缀 (可选):'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">customFooterPrefixs</span><span class="token operator">:</span> <span class="token string">'输入自定义issue前缀 :'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'列举关联issue (可选) 例如: #31, #I3244 :\n'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">confirmCommit</span><span class="token operator">:</span> <span class="token string">'是否提交或修改commit ?'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">types</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'feat'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'feat:     新增功能'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'fix'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'fix:      修复缺陷'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'docs'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'docs:     文档变更'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'style'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'style:    代码格式'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'refactor'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'refactor: 代码重构'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'perf'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'perf:     性能优化'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test:     添加疏漏测试或已有测试改动'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'build:    构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'ci'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'ci:       修改 CI 配置、脚本'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'revert'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'revert:   回滚 commit'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'chore'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'chore:    对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'wip'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'wip:      正在开发中'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'workflow'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'workflow: 工作流程改进'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'types'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'types:    类型定义文件修改'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">emptyScopesAlias</span><span class="token operator">:</span> <span class="token string">'empty:      不填写'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">customScopesAlias</span><span class="token operator">:</span> <span class="token string">'custom:     自定义'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br></div></div></li> <li><p>加上git husky</p> <ul><li><p><code>yarn add -D czg</code></p></li> <li><p>加上script</p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token property">&quot;commit&quot;</span><span class="token operator">:</span> <span class="token string">&quot;czg&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul></li></ul></li></ul></li> <li><p>增加 <code>conventional-changelog-cli</code>脚本自动生成changelog</p> <ul><li><p><code>yarn add conventional-changelog-cli -D</code></p></li> <li><p>添加脚本</p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;log&quot;</span><span class="token operator">:</span> <span class="token string">&quot;conventional-changelog -p angular -i CHANGELOG.md -s&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul></li></ul></li></ul></li> <li><p>最后package.json 可能有点乱了， 使用 <code>sort-package-json</code>整理下</p> <ul><li><code>yarn add sort-package-json -D</code></li> <li><code>npx sort-package-json</code></li></ul></li></ul></li></ul></div></div>  <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/10/26, 16:57:52</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/f701f5/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">jest测试</div></a> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/f701f5/" class="prev">jest测试</a></span> <!----></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/e3ef00/"><div>
            接雨水
            <!----></div></a> <span class="date">04-08</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/a5eeb6/"><div>
            vim日常使用记录
            <!----></div></a> <span class="date">04-08</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/d46779/"><div>
            有效的字母异位词
            <!----></div></a> <span class="date">04-08</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:izhaong@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/izhaong" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2024
    <span>izhaong | <a href="https://github.com/izhaong" target="_blank">github</a> | <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2021031194号</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.6d26e8d4.js" defer></script><script src="/assets/js/2.8273876b.js" defer></script><script src="/assets/js/364.419b3dab.js" defer></script>
  </body>
</html>
